<template>
  <!-- 已经关注的状态 -->
          <van-button
            v-if=" isFollowed"
            class="follow-btn"
            round
            size="small"
            @click="onFollow"
            :loading="followLoading"
            >已关注</van-button
          >
          <!-- 未关注 -->
          <van-button
            v-else
            class="follow-btn"
            type="info"
            color="#3296fa"
            round
            size="small"
            icon="plus"
            @click="onFollow"
            :loading="followLoading"
            >关注</van-button
          >
</template>

<script>
import { addFollow, deleteFollow } from "@/api/user";
export default {
    data(){
        return{
      followLoading: false, //加载状态
        }
    },
props:{
    isFollowed:{
        type:Boolean,
        required:true
    },
    userId:{
        type:[Number,String,Object],
        required:true
    }
},
methods:{
    // 用户关注和未关注状态
    async onFollow() {
      // 开启加载
      this.followLoading=true
      try {
        //  如果关注则取消关注
        if (this.isFollowed) {
          await deleteFollow(this.userId);
          
        } else {
          await addFollow(this.userId);
        }
        // 更新视图
        this.$emit('updata-is_followed',!this.isFollowed)
      } catch (err) {
        console.log(err);
        let message = "操作失败,请重试!";

        if (err.response && err.response.status === 400) {
          message = "你不能关注你自己";
        }
        this.$toast(message);
      }
      // 无论成功与否都关闭加载
      this.followLoading=false
    },
}
}
</script>

<style>

</style>